<template>
    <div>
        <top-bar></top-bar>
        <left-bar :datas='data'></left-bar>
        <div class="adddrug system">
            <home-bar :currentPage='currentPage'></home-bar>
            <div class="adddrugs system-main">
                <div class="main-position">
                    首页 > 药品管理 > 新增药品
                </div>
                <div class="main-height"></div>
                <div class="main-mains">
                    <div class="main-top-nav">
                        <ul>
                            <li :class="{active: this.$route.params.ppath == 'stockmanagement'}">
                                <router-link to="/druglistai/stockmanagement" @click.native="addPath('/druglistai/stockmanagement','药品管理');">
                                    进货管理
                                </router-link>
                            </li>
                            <li :class="{active: this.$route.params.ppath == 'xiajia'}">
                                <router-link to="/druglistai/xiajia" @click.native="addPath('/druglistai/xiajia','药品管理');">
                                    已下架
                                </router-link>
                            </li>
                            <li :class="{active: this.$route.params.ppath == 'deleteddrugs'}">
                                <router-link to="/druglistai/deleteddrugs" @click.native="addPath('/druglistai/deleteddrugs','药品管理');">
                                    已删除药品
                                </router-link>
                            </li>
                            <li :class="{active: this.$route.params.ppath == 'shortageofdrugs'}">
                                <router-link to="/druglistai/shortageofdrugs" @click.native="addPath('/druglistai/shortageofdrugs','药品管理');">
                                </router-link>
                                缺货药品
                            </li>
                            <li :class="{active: this.$route.params.ppath == 'willexpire'}">
                                <router-link to="/druglistai/willexpire" @click.native="addPath('/druglistai/willexpire','药品管理');">
                                    即将过期
                                </router-link>
                            </li>
                            <li :class="{active: this.$route.params.ppath == 'expired'}">
                                <router-link to="/druglistai/expired" @click.native="addPath('/druglistai/expired','药品管理');">
                                    已过期
                                </router-link>
                            </li>
                            <li :class="{active: this.$route.params.ppath == 'lackdrug'}">
                                <router-link to="/druglistai/lackdrug" @click.native="addPath('/druglistai/lackdrug','药品管理');">
                                    库存预警
                                </router-link>
                            </li>
                            <li>
                                <router-link to="/productcategorymgmt" @click.native="addPath('/productcategorymgmt','药品管理');">
                                    产品种类管理
                                </router-link>
                            </li>
                            <li>
                                <router-link to="/brandlibrary" @click.native="addPath('/brandlibrary','药品管理');">
                                    品牌库
                                </router-link>
                            </li>
                        </ul>
                    </div>
                    <div class="drugsInfo">
                        <div class="inner-return">
                            <router-link :to="'/druglistai/'+$route.params.ppath">
                                返回列表
                            </router-link>
                        </div>
                        <h5 class="heading">本批药品详情</h5>
                        <div class="thisBatchDetails clear">
                            <ul>
                                <li>
                                    <span class="leftTitle">销售范围</span>
                                    <div class="rightContent">
                                        <div class="existingSalesRange">
                                            <div class="group" v-for="(item,index) in medical.region_list" :key="index">
                                                <div>{{item.province}}
                                                    <span v-if="item.city_list">
                                                            （
                                                            <span v-for="(sonitem,index) in item.city_list" :key="index">{{sonitem.city}} <em v-if="item.city_list.length - index > 1">、</em></span> )
                                                    </span>
                                                </div>
                                                <a href="javascript:void(0);" @click="mgmtTheProvince(item.province_id,index,item.province)">管理该省</a>
                                                <a href="javascript:void(0);" v-if="item.city_list" @click="deleteProvince(index)">删除该省</a>
                                                <a href="javascript:void(0);" v-else-if="!item.city_list" @click="deleteProvince(index)">删除该地区</a>
                                            </div>
                                        </div>
                                        <a href="javascript:void(0);" class="addSalesRange" @click="addProvince" v-if="!isQuanGuo">添加销售范围</a>
                                    </div>
                                </li>
                                <li><span class="leftTitle">生产批号</span>
                                    <div class="rightContent">
                                        <el-input v-model="medical.batch_num"></el-input>
                                    </div>
                                </li>
                                <li><span class="leftTitle">
                                                              信息费比例</span>
                                    <div class="rightContent">
                                        <el-select v-model="org_info_fee_rate" placeholder="请选择">
                                            <el-option v-for="(item,index) in 49" :key="index" :value="index+'%'">
                                            </el-option>
                                        </el-select>
                                    </div>
                                </li>
                                <li><span class="leftTitle">库存</span>
                                    <div class="rightContent">
                                        <el-input v-model="medical.stock"></el-input>
                                    </div>
                                </li>
                                <li><span class="leftTitle">生产日期</span>
                                    <div class="rightContent">
                                        <el-date-picker v-model="medical.manu_date" type="date" placeholder="选择日期">
                                        </el-date-picker>
                                    </div>
                                </li>
                                <li><span class="leftTitle">保质期</span>
                                    <div class="rightContent">
                                        <el-select v-model="medical.shelf_life" placeholder="请选择">
                                            <el-option v-for="item in shelfLifeOptions" :key="item.value" :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </div>
                                </li>
                                <li><span class="leftTitle">定价</span>
                                    <div class="rightContent">
                                        <div class="priceInput">
                                            <div class="priceBox clear">
                                                <li v-for="(oprice,index) in medical.pur_price_list" :key="index">
                                                    <el-input placeholder="件" v-model="oprice.min_num" type="number"></el-input>
                                                    <em class="intervalLine">—</em>
                                                    <el-input placeholder="件" v-model="oprice.max_num" type="number"></el-input>
                                                    <span class="leftTitle priceTitle">售价</span>
                                                    <el-input placeholder="元" v-model="oprice.price" type="number"></el-input>
                                                    <span class="deletePrice" @click="deletePrice(index)">删除</span>
                                                </li>
                                                <div class="addPrice" @click="clickAddPrice">添加定价范围</div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <h5 class="heading">药品基本信息</h5>
                        <div class="drugsBasicInfo clear">
                            <ul>
                                <li><span class="leftTitle">药品分类</span>
                                    <div class="rightContent">{{medical.category_name}}</div>
                                </li>
                                <li><span class="leftTitle">药品简介</span>
                                    <div class="rightContent">{{medical.description}}</div>
                                </li>
                                <li><span class="leftTitle">药品品牌</span>
                                    <div class="rightContent">{{medical.brand_name}}</div>
                                </li>
                                <li><span class="leftTitle">药品卖点</span>
                                    <div class="rightContent">{{medical.sell_point}}</div>
                                </li>
                                <li><span class="leftTitle">基药分类</span>
                                    <div class="rightContent">{{medical.is_basic}}</div>
                                </li>
                            </ul>
                            <ul>
                                <li><span class="leftTitle">药品名称</span>
                                    <div class="rightContent">{{medical.name}}</div>
                                </li>
                                <li><span class="leftTitle">药品条码</span>
                                    <div class="rightContent">
                                        <div class="coderSvg">
                                            <barcode :value="medical.coding" :options="barcode_option" tag="svg" class="orderDetails-bar-codes"></barcode>
                                        </div>
                                    </div>
                                </li>
                                <!-- {{medical.}} -->
                                <li><span class="leftTitle">药品编号</span>
                                    <div class="rightContent">{{medical.coding}}</div>
                                </li>
                                <li><span class="leftTitle">药监类目</span>
                                    <div class="rightContent">{{medical.drug_ctr_cate}}</div>
                                </li>
                                <li><span class="leftTitle">件装数量</span>
                                    <div class="rightContent">{{medical.pack_spe}}</div>
                                </li>
                                <li><span class="leftTitle">医保目录</span>
                                    <div class="rightContent">无</div>
                                </li>
                            </ul>
                        </div>
                        <div class="headingBox">
                            <h5 class="heading">医保类型</h5>
                        </div>
                        <div class="detailedContent">
                            <!--不能编辑药品类型，如果需要编辑可以解开注释 <a href="javascript:void(0);" class="addHealthCareType" @click="addHealthCareTypeFun"><i class="el-icon-plus"></i></a> -->
                            <div class="healthCareTypeList clear">
                                <li v-for="(item,index) in medical.insurance_list" :key="index">
                                    {{item.province}}<br> {{item.med_insr_type = item.med_insr_type == 1?"甲类":"乙类"}}
                                    <!--不能编辑药品类型，如果需要编辑可以解开注释 <i class="close" @click="deleteSingleHealthCare(index)"></i> -->
                                </li>
                            </div>
                        </div>
                        <div class="headingBox">
                            <h5 class="heading">经营范围</h5>
                        </div>
                        <div class="detailedContent">
                            <div class="ScopeOfBusiness">
                                <el-checkbox-group v-model="medical.scope_names">
                                    <el-checkbox v-for="(oscope,index) in scope_list" :label="oscope.name" :key="index" disabled>{{oscope.name}}</el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </div>
                        <div class="headingBox">
                            <h5 class="heading">药品属性</h5>
                        </div>
                        <div class="detailedContent">
                            <div class="drugsAttr clear">
                                <!-- 普通药品 -->
                                <ul v-if="switchDrugSafety.showGenericDrugs">
                                    <li><span>特殊要求</span><span>{{medical.spe_reqm}}</span></li>
                                    <li><span>批准文号</span><span>{{medical.lic_num}}</span></li>
                                    <li><span>产品规格</span><span>{{medical.spe}}</span></li>
                                    <li><span>GMG认证情况</span><span>{{medical.gmp_auth}}</span></li>
                                    <li><span>批准日期</span><span>{{medical.lic_date}}</span></li>
                                    <li><span>药品本位码</span><span>{{medical.std_code}}</span></li>
                                    <li><span>产地</span><span>{{medical.prod}}</span></li>
                                    <li><span>处方/非处方药</span><span>{{medical.med_type | filterMed_type}}</span></li>
                                    <li><span>生产厂家</span><span>{{medical.manu_fac}}</span></li>
                                    <li><span>剂型</span><span>{{medical.form}}</span></li>
                                    <li><span>产品单位</span><span>{{medical.unit}}</span></li>
                                    <li><span>通用名</span><span>{{medical.gen_nm}}</span></li>
                                    <li><span>英文名称</span><span>{{medical.eng_nm}}</span></li>
                                    <li><span>拼音首字母</span><span>{{medical.first_let}}</span></li>
                                </ul>
                                <!-- 保健品 -->
                                <ul v-if="switchDrugSafety.showHealthProducts">
                                    <li><span>主要成分</span><span>{{medical.basis}}</span></li>
                                    <li><span>主要功能</span><span>{{medical.health_care}}</span></li>
                                    <li><span>产品规格</span><span>{{medical.spe}}</span></li>
                                    <li><span>保质期</span><span>{{medical.shelf_life}}</span></li>
                                    <li><span>食品卫生许可号</span><span>{{medical.fd_hy_lic_num}}</span></li>
                                    <li><span>单位</span><span>{{medical.unit}}</span></li>
                                    <li><span>生产厂家</span><span>{{medical.manu_fac}}</span></li>
                                    <li><span>批准文号</span><span>{{medical.lic_num}}</span></li>
                                    <li><span>适宜人群</span><span>{{medical.suit_peo}}</span></li>
                                    <li><span>不适宜人群</span><span>{{medical.unsuit_peo}}</span></li>
                                    <li><span>贮藏方法</span><span>{{medical.cond_stor}}</span></li>
                                    <li><span>使用方法及用量</span><span>{{medical.cp_met_dos}}</span></li>
                                    <li><span>执行标准</span><span>{{medical.imp_stand}}</span></li>
                                    <li><span>注意事项</span><span>{{medical.mat_nd_att}}</span></li>
                                    <li><span>通用名称</span><span>{{medical.gen_nm}}</span></li>
                                </ul>
                                <!-- 医疗器械 -->
                                <ul v-if="switchDrugSafety.showInstrument">
                                    <li><span>注册号</span><span>{{medical.reg_num}}</span></li>
                                    <li><span>生产厂家</span><span>{{medical.manu_fac}}</span></li>
                                    <li><span>规格型号</span><span>{{medical.spe}}</span></li>
                                    <li><span>单位</span><span>{{medical.unit}}</span></li>
                                    <li><span>适用范围</span><span>{{medical.scope}}</span></li>
                                    <li><span>生产厂家</span><span>{{medical.manu_fac}}</span></li>
                                    <li><span>通用名称</span><span>{{medical.gen_nm}}</span></li>
                                    <li><span>产品标准</span><span>{{medical.pro_standard}}</span></li>
                                </ul>
                                <!-- 药妆 -->
                                <ul v-if="switchDrugSafety.showMedicineMakeup">
                                    <li><span>批准文号</span><span>{{medical.lic_num}}</span></li>
                                    <li><span>产品分类</span><span>{{medical.pro_cate}}</span></li>
                                    <li><span>生产厂家</span><span>{{medical.manu_fac}}</span></li>
                                    <li><span>单位</span><span>{{medical.unit}}</span></li>
                                    <li><span>产品规格</span><span>{{medical.spe}}</span></li>
                                    <li><span>厂家地址</span><span>{{medical.manu_addr}}</span></li>
                                    <li><span>通用名称</span><span>{{medical.gen_nm}}</span></li>
                                </ul>
                                <!-- 其他 -->
                                <ul v-if="switchDrugSafety.showMedicineMakeup">
                                    <li><span>生产厂家</span><span>{{medical.manu_fac}}</span></li>
                                    <li><span>产品规格</span><span>{{medical.spe}}</span></li>
                                    <li><span>通用名称</span><span>{{medical.gen_nm}}</span></li>
                                    <li><span>单位</span><span>{{medical.unit}}</span></li>
                                    <li><span>厂家地址</span><span>{{medical.manu_addr}}</span></li>
                                </ul>
                            </div>
                        </div>
                        <!-- 普通药品 -->
                        <div v-if="switchDrugSafety.showGenericDrugs">
                            <div class="headingBox">
                                <h5 class="heading">生产企业资质</h5>
                            </div>
                            <div class="detailedContent">
                                <div class="checkFile clear">
                                    <ul>
                                        <li v-for="(item,index) in zizhiList.zizhiProduction" :key="index">
                                            <span v-if="item.type == 1">营业执照</span>
                                            <span v-if="item.type == 2">GMP证书</span>
                                            <span v-if="item.type == 3">生产许可证</span>
                                            <a href="javascript:void(0);" @click="seeImgFun(item.image_url)">查看文件</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="headingBox">
                                <h5 class="heading">药品资质</h5>
                            </div>
                            <div class="detailedContent">
                                <div class="checkFile clear">
                                    <ul>
                                        <li v-for="(item,index) in zizhiList.zizhiDrug" :key="index">
                                            <span v-if="item.type == 4">生产批件</span>
                                            <span v-if="item.type == 5">药品质量标准</span>
                                            <span v-if="item.type == 6">包装盒及包装备案</span>
                                            <span v-if="item.type == 7">说明书</span>
                                            <span v-if="item.type == 8">质检报告</span>
                                            <span v-if="item.type == 9">商标注册证</span>
                                            <a href="javascript:void(0);" @click="seeImgFun(item.image_url)">查看文件</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div v-if="switchDrugSafety.showInstrument">
                            <div class="headingBox">
                                <h5 class="heading">医疗器械资质</h5>
                            </div>
                            <div class="detailedContent">
                                <div class="checkFile clear">
                                    <ul>
                                        <li v-for="(item,index) in zizhiList.zizhiDrug" :key="index">
                                            <span v-if="item.type == 10">医疗器械注册证</span>
                                            <span v-if="item.type == 11">医疗器械注册登记表</span>
                                            <span v-if="item.type == 12">生产厂家营业执照</span>
                                            <span v-if="item.type == 13">医疗器械生产企业许可证</span>
                                            <a href="javascript:void(0);" @click="seeImgFun(item.image_url)">查看文件</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="headingBox">
                            <h5 class="heading">说明书</h5>
                        </div>
                        <div class="detailedContent">
                            <div class="instructionsContainer" v-html="medical.instruction">
                                {{medical.instruction}}
                            </div>
                        </div>
                        <div class="headingBox">
                            <h5 class="heading">药品图片</h5>
                        </div>
                        <div class="detailedContent">
                            <img alt="" v-for="(item) in medical.image_list" :key="item" :src="item" class="bannerImgList">
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                        </div>
                        <div class="headingBox">
                            <h5 class="heading">产品描述</h5>
                        </div>
                        <div class="detailedContent">
                            <div class="productDescriptionContainer" v-html="medical.detail">{{medical.detail}}</div>
                            <!-- 加载编辑器的容器 -->
                        </div>
                        <div class="headingBox">
                            <h5 class="heading">包装</h5>
                        </div>
                        <div class="detailedContent clear">
                            <textarea v-model="medical.pk_content" class="drugsPkClass" disabled></textarea>
                        </div>
                        <div class="headingBox">
                            <h5 class="heading">智能标签</h5>
                        </div>
                        <div class="detailedContent">
                            <div class="smartTags">
                                <!--不能编辑 <div class="addTags">
                                            <span>智能标签：</span>
                                            <input type="text" placeholder="例如流鼻涕" v-model="tagInput">
                                            <button @click="addTags">添加</button>
                                        </div> -->
                                <div class="tagsList clear">
                                    <div class="tagsItem">
                                        <li v-for="(tag,index) in medical.tag_list" :key="index">
                                            {{index+1}}、{{tag}}
                                            <!--不能编辑 <i class="el-icon-close" @click="deleteTag(index)"></i> -->
                                        </li>
                                    </div>
                                    <!--不能编辑 <div class="note">
                                                <h5>备注：</h5>
                                                <p>添加智能标签，让用户更容易搜到这个药品（每行添加一种标签）如：<br>我感冒了
                                                    <br>感冒用药
                                                    <br>咳嗽用药
                                                </p>
                                            </div> -->
                                </div>
                            </div>
                        </div>
                        <div class="totalBtn">
                            <a href="javascript:void(0);" @click="saveAndShelves(1)">保存并上架</a>
                            <a href="javascript:void(0);" @click="saveAndShelves">保存暂不上架</a>
                            <a href="#" class="cancelAgment">取消</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 弹窗开始 -->
            <div class="system-menban" v-show="showSystemPopup"></div>
            <div class="systemPopup" v-show="showSystemPopup">
                <div class="topTitle">
                    <span>{{systemPopupTitle}}</span>
                    <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
                </div>
                <!-- 添加医保类型弹窗 -->
                <div class="addHealthCareTypePopup" v-show="showAddHealthCareType">
                    <div class="itemBox clear">
                        <span class="leftTitle">医保地区</span>
                        <div class="rightMain">
                            <el-select v-model="healthCareRegionValue" placeholder="请选择">
                                <el-option v-for="item in provinceList" :key="item.province_id" :label="item.province" :value="item.province_id">
                                </el-option>
                            </el-select>
                            <div class="warningText" v-show="showWarningText.province"><i class="el-icon-warning"></i>请选择医保地区</div>
                        </div>
                    </div>
                    <div class="itemBox clear">
                        <span class="leftTitle">医保类型</span>
                        <div class="rightMain">
                            <el-select v-model="healthCareTypeValue" placeholder="请选择">
                                <el-option v-for="item in healthCareTypeOptions" :key="item.id" :label="item.label" :value="item.id">
                                </el-option>
                            </el-select>
                            <div class="warningText" v-show="showWarningText.healthCareType"><i class="el-icon-warning"></i>请选择医保类型</div>
                        </div>
                    </div>
                    <div class="system-messagebox1-btn clear">
                        <div @click="addSingleHealthCare">添加</div>
                        <div @click="hideSystemPopup">取消</div>
                    </div>
                </div>
                <!-- 管理该省 -->
                <div class="mgmtTheProvince" v-if="showMgmtTheProvincePopup">
                    <div v-if="isMgmtProvince" class="provinceName">{{checkProvince_name}}</div>
                    <div class="chooseProvince" v-else-if="!isMgmtProvince">
                        <span class="leftTitle">选择省份</span>
                        <el-select v-model="provinceValue" placeholder="请选择" @change="provinceValueChange(provinceValue)">
                            <el-option v-for="item in province_list_option" :key="item.province_id" :label="item.province" :value="item.province_id">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="cityBox">
                        <el-checkbox-group v-model="checkedCitys">
                            <el-checkbox v-for="(city,index) in city_list_option" :label="city.city_id" :key="city.index" @change="selectCity(index,city.city_id,city.city,city.province_id)">{{city.city}}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div class="system-messagebox1-btn clear">
                        <div @click="closeChooseProvince">确定</div>
                        <div v-if="!isMgmtProvince" @click="cancelChooseProvince">取消</div>
                    </div>
                </div>
                <!-- 查看图片（资质） -->
                <div class="seeImgPopup" v-if="showSeeImgPopup">
                    <img :src="popupBigImg" alt="">
                </div>
            </div>
            <!-- 弹窗结束 -->
        </div>
    </div>
</template>

<script>
    import topBar from "../../public/top";
    import leftBar from "../../public/left";
    import homeBar from "../../public/homebar";
    export default {
        components: {
            leftBar,
            topBar,
            homeBar
        },
        data() {
            return {
                data: "drugManagment",
                currentPage: {
                    path: "/agentadddrug",
                    name: "新增药品"
                },
                drugsInfo: false,
                businessType: [],
                dialogImageUrl: "",
                dialogVisible: false,
                drugInput: "",
                numInput: "",
                checkAfterSalesService: [],
                tagInput: "",
                healthCareTypeList: [
                    //医保类型
                    {
                        type: "甲类",
                        region: "广东省"
                    },
                    {
                        type: "乙类",
                        region: "山西省"
                    }
                ],
                showWarningText: {
                    //弹窗提示文字
                    province: false, //医保地区
                    healthCareType: false //医保类型
                },
                provinceList: [],
                healthCareTypeOptions: [
                    //医保类型就两个，写死的
                    {
                        id: "1",
                        label: "甲类"
                    },
                    {
                        id: "2",
                        label: "乙类"
                    }
                ],
                med_insr_list_view: [],
                med_insr_list: [], //医保类型
                showSystemPopup: false,
                systemPopupTitle: "",
                showMgmtTheProvincePopup: false, //管理该省
                showSeeImgPopup: false, //查看图片
                showCodingProductDetailPopup: false, //（查询结果弹窗）开关
                showShangXiajiaPopup: false, //下架弹窗
                showPatchExport: false, //（导出弹窗）开关
                checkProvince_id: "", //选中省份的id
                originalProvinceIndex: "", //选中省份的index
                isMgmtProvince: false, //true是管理该省，false是添加销售范围
                checkProvince_name: "",
                addCityValue: [], //选中城市的数组
                isEdit: false, //判断当前是编辑
                isQuanGuo: false, //点击新增销售范围中的确定 如果是全国的话就是true
                provinceValue: "", //选中的省份
                province_list_option: [], //省份选项
                checkedCitys: [], //选中的城市
                city_list_option: [], //城市选项
                showAddHealthCareType: false,
                healthCareRegionValue: "",
                healthCareTypeValue: "",
                switchDrugSafety: {
                    showGenericDrugs: true, //显示普通药品属性和生产资质、药品资质
                    showHealthProducts: false, //显示保健品的属性
                    showInstrument: false, //显示医疗器械的属性和医疗器械资质
                    showMedicineMakeup: false, //显示药妆属性
                    showOther: false, //显示其他属性
                },
                medical: {},
                org_info_fee_rate: "",
                shelfLifeOptions: [{
                        //保质期
                        value: 6,
                        label: 6
                    },
                    {
                        value: 12,
                        label: 12
                    },
                    {
                        value: 24,
                        label: 24
                    },
                    {
                        value: 36,
                        label: 36
                    },
                ],
                barcode_option: {
                    displayValue: true, //是否默认显示条形码数据
                    background: "#fff", //条形码背景颜色
                    valid: function(valid) {
                        console.log(valid);
                    },
                    width: "1px",
                    height: "39px"
                },
                uploadImgUrl: this.urls + "/adm/medical/uploadMedicalImage/" +
                    localStorage.getItem("uid") +
                    "/" +
                    localStorage.getItem("token") +
                    "",
                auth_image_list_arr: [],
                drugsPkContent: "", //包装内容
                productDescHtml: "", //药品详情
                instructionHtml: "", //说明书
                scope_list: [],
                zizhiList: { //资质
                    zizhiProduction: [], //生产企业资质
                    zizhiDrug: [], //药品资质
                    zizhiInstrument: [], //医疗器械资质
                    popupBigImg: "",
                }
            };
        },
        activated() {
            this.getList();
            this.getScope_list(); //获取经营范围列表
        },
        methods: {
            //错误弹窗
            messageAlert(msg) {
                this.$message.error(msg);
            },
            //成功弹窗
            successfulAlert(msg) {
                this.$message({
                    message: msg,
                    type: 'success'
                });
            },
            //提示框
            infoAlert(msg) {
                this.$message(msg);
            },
            //获取药品详情数据
            getList() {
                var _this = this;
                let ourls =
                    this.urls +
                    "/who/user/refreshToken/" +
                    localStorage.getItem("uid") +
                    "/" +
                    localStorage.getItem("token");
                checkTime(
                    new Date().getTime() / 1000,
                    ourls,
                    localStorage.getItem("reToken")
                );
                // 请求开始
                _this
                    .$http({
                        url: this.urls +
                            "/who/medical/getMedicalDetail/" +
                            localStorage.getItem("uid") +
                            "/" +
                            localStorage.getItem("token") + "?coding=" + this.$route.params.coding + "&more=1",
                        method: "get",
                    })
                    .then(function(res) {
                        let data = res.data;
                        if (data.code == 1) {
                            _this.medical = data.data.medical;
                            _this.medical.scope_names = _this.medical.scope_names.split("，");
                            if (_this.medical.info_fee_rate != undefined) {
                                _this.org_info_fee_rate = _this.medical.info_fee_rate * 100 + '%';
                            }
                            for (var i in _this.switchDrugSafety) {
                                _this.switchDrugSafety[i] = false;
                            }
                            if (_this.medical.drug_ctr_cate == 2) {
                                // 保健品
                                _this.switchDrugSafety.showHealthProducts = true;
                            } else if (_this.medical.drug_ctr_cate == 3) {
                                // 医疗器械
                                _this.switchDrugSafety.showInstrument = true;
                            } else if (_this.medical.drug_ctr_cate == 4) {
                                // 药妆
                                _this.switchDrugSafety.showMedicineMakeup = true;
                            } else if (_this.medical.drug_ctr_cate == 5) {
                                // 其他
                                _this.switchDrugSafety.showOther = true;
                            } else {
                                // 普通药品
                                _this.switchDrugSafety.showGenericDrugs = true;
                            }
                            for (var j in _this.medical.insurance_list) { //医保类型
                                _this.med_insr_list.push({
                                    province_id: _this.medical.insurance_list[j].province,
                                    med_insr_type: _this.medical.insurance_list[j].med_insr_type
                                })
                            }
                            console.log(_this.medical);
                            for (var j in _this.medical.auth_image_list) {
                                if (_this.medical.auth_image_list[j].type == 1 || _this.medical.auth_image_list[j].type == 2 || _this.medical.auth_image_list[j].type == 3) {
                                    _this.zizhiList.zizhiProduction.push({
                                        expire_date: _this.medical.auth_image_list[j].expire_date, //过期时间
                                        image_url: _this.medical.auth_image_list[j].image_url, //图片地址
                                        type: _this.medical.auth_image_list[j].type //资质类型
                                    })
                                } else if (_this.medical.auth_image_list[j].type == 4 || _this.medical.auth_image_list[j].type == 5 || _this.medical.auth_image_list[j].type == 6 || _this.medical.auth_image_list[j].type == 7 || _this.medical.auth_image_list[j].type == 8 || _this.medical.auth_image_list[j].type == 9) {
                                    _this.zizhiList.zizhiDrug.push({
                                        expire_date: _this.medical.auth_image_list[j].expire_date, //过期时间
                                        image_url: _this.medical.auth_image_list[j].image_url, //图片地址
                                        type: _this.medical.auth_image_list[j].type //资质类型
                                    })
                                } else if (_this.medical.auth_image_list[j].type == 10 || _this.medical.auth_image_list[j].type == 11 || _this.medical.auth_image_list[j].type == 12 || _this.medical.auth_image_list[j].type == 13) {
                                    _this.zizhiList.zizhiInstrument.push({
                                        expire_date: _this.medical.auth_image_list[j].expire_date, //过期时间
                                        image_url: _this.medical.auth_image_list[j].image_url, //图片地址
                                        type: _this.medical.auth_image_list[j].type //资质类型
                                    })
                                }
                            }
                            localStorage.setItem("nowTimes", new Date().getTime() / 1000); //检查token失效函数
                        } else {
                            _this.messageAlert(data.msg);
                            invalid(data.msg); //检查token失效函数
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            },
            //获取经营范围列表
            getScope_list() {
                let _this = this;
                //检查token失效函数
                let ourls =
                    this.urls +
                    "/adm/user/refreshToken/" +
                    localStorage.getItem("uid") +
                    "/" +
                    localStorage.getItem("token");
                checkTime(
                    new Date().getTime() / 1000,
                    ourls,
                    localStorage.getItem("reToken")
                );
                _this.$http
                    .get(
                        this.urls +
                        "/adm/medical/getScopeList/" +
                        localStorage.getItem("uid") +
                        "/" +
                        localStorage.getItem("token")
                    )
                    .then(function(res) {
                        let data = res.data;
                        if (data.code == 1) {
                            _this.scope_list = data.data.scope_list;
                            localStorage.setItem("nowTimes", new Date().getTime() / 1000); //检查token失效函数
                        } else {
                            invalid(data.msg); //检查token失效函数
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            },
            //获取省份
            getProvinceList(otype) {
                var _this = this;
                let ourls =
                    this.urls +
                    "/who/user/refreshToken/" +
                    localStorage.getItem("uid") +
                    "/" +
                    localStorage.getItem("token");
                checkTime(
                    new Date().getTime() / 1000,
                    ourls,
                    localStorage.getItem("reToken")
                );
                // 请求开始
                _this
                    .$http({
                        url: this.urls +
                            "/who/medical/getProvinceList/" +
                            localStorage.getItem("uid") +
                            "/" +
                            localStorage.getItem("token"),
                        method: "get"
                    })
                    .then(function(res) {
                        let data = res.data;
                        if (data.code == 1) {
                            if (otype == 1) { //医保类型
                                _this.provinceList = data.data.province_list;
                                console.log(_this.provinceList);
                            } else if (otype == 2) {
                                _this.province_list_option = data.data.province_list;
                                if (!_this.isMgmtProvince) {
                                    for (var i in _this.province_list_option) {
                                        for (var j in _this.medical.region_list) {
                                            if (_this.province_list_option[i].province_id == _this.medical.region_list[j].province_id) {
                                                _this.province_list_option.splice(i, 1)
                                            }
                                        }
                                    }
                                    _this.province_list_option = _this.province_list_option;
                                }
                            }
                            localStorage.setItem("nowTimes", new Date().getTime() / 1000); //检查token失效函数
                        } else {
                            _this.messageAlert(data.msg);
                            invalid(data.msg); //检查token失效函数
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            },
            //点击管理该省
            mgmtTheProvince(province_id, index, provincename) {
                this.isMgmtProvince = true; //true是管理该省，false是添加销售范围
                this.checkProvince_name = provincename; //保留该省的名称
                this.originalProvinceIndex = index; //保留该省的index值
                this.getProvinceList(2); //获取省份选项
                this.provinceValue = province_id; //打开后默认选中该省
                this.provinceValueChange(province_id); //显示该省城市
                this.checkProvince_id = province_id;
                for (var i in this.medical.region_list[index].city_list) {
                    //打开后默认选中该省的城市
                    this.checkedCitys.push(
                        this.medical.region_list[index].city_list[i].city_id
                    );
                    this.checkedCitys = Array.from(new Set(this.checkedCitys));
                }
                this.showSystemPopup = true;
                this.showMgmtTheProvincePopup = true;
                this.systemPopupTitle = "管理销售范围";
            },
            //省份的change事件
            provinceValueChange(province_id) {
                var _this = this;
                this.checkProvince_id = province_id;
                this.checkedCitys = [];
                if (province_id == 0) {
                    this.city_list_option = [];
                    return;
                }
                let ourls =
                    this.urls +
                    "/who/user/refreshToken/" +
                    localStorage.getItem("uid") +
                    "/" +
                    localStorage.getItem("token");
                checkTime(
                    new Date().getTime() / 1000,
                    ourls,
                    localStorage.getItem("reToken")
                );
                // 请求开始
                _this
                    .$http({
                        url: this.urls +
                            "/who/medical/getCityList/" +
                            localStorage.getItem("uid") +
                            "/" +
                            localStorage.getItem("token") +
                            "&province_id=" +
                            province_id,
                        method: "get"
                    })
                    .then(function(res) {
                        let data = res.data;
                        if (data.code == 1) {
                            _this.city_list_option = data.data.city_list;
                            localStorage.setItem("nowTimes", new Date().getTime() / 1000); //检查token失效函数
                        } else {
                            _this.messageAlert(data.msg);
                            invalid(data.msg); //检查token失效函数
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            },
            //城市的change事件
            selectCity(index) {
                //增加的
                if (this.isMgmtProvince) {
                    if (this.checkedCitys.indexOf(this.city_list_option[index].city_id) == -1) {
                        for (var i in this.medical.region_list) {
                            if (this.medical.region_list[i].province_id == this.checkProvince_id) {
                                for (var j in this.medical.region_list[i].city_list) {
                                    if (this.medical.region_list[i].city_list[j].city_id == this.city_list_option[index].city_id) {
                                        this.medical.region_list[i].city_list.splice(j, 1);
                                        break;
                                    }
                                }
                                break;
                            }
                        }
                    } else {
                        for (var i in this.medical.region_list) {
                            if (this.medical.region_list[i].province_id == this.checkProvince_id) {
                                this.medical.region_list[i].city_list.push(this.city_list_option[index]);
                                break;
                            }
                        }
                    }
                } else {
                    if (this.checkedCitys.indexOf(this.city_list_option[index].city_id) == -1) {
                        for (var j in this.addCityValue) {
                            if (this.addCityValue[j].city_id == this.city_list_option[index].city_id) {
                                this.addCityValue.splice(j, 1);
                                break;
                            }
                        }
                    } else {
                        this.addCityValue.push(this.city_list_option[index]);
                    }
                }
            },
            //删除该省
            deleteProvince(index) {
                var _this = this;
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    _this.medical.region_list.splice(index, 1);
                    _this.successfulAlert("删除成功!");
                    _this.isQuanGuo = false;
                }).catch(() => {
                    _this.infoAlert("已取消删除");
                });
            },
            //新增销售范围
            addProvince() {
                this.provinceValue = [];
                this.city_list_option = [];
                this.checkedCitys = [];
                this.addCityValue = [];
                this.isMgmtProvince = false; //true是管理该省，false是添加销售范围
                this.getProvinceList(2); //获取省份选项
                this.showSystemPopup = true;
                this.showMgmtTheProvincePopup = true;
                this.systemPopupTitle = "新增销售范围";
            },
            //点击修改省份弹窗中的确定
            closeChooseProvince() {
                var _this = this;
                this.cancelChooseProvince();
                if (this.checkProvince_id == 0) {
                    this.medical.region_list = [];
                    this.isQuanGuo = true;
                    this.medical.region_list.push({
                        "province_id": 0,
                        "province": "全国",
                    });
                    return;
                }
                if (!this.isMgmtProvince) {
                    for (var i in _this.province_list_option) {
                        if (_this.province_list_option[i].province_id == _this.checkProvince_id) {
                            if (this.medical.region_list != undefined) {
                                _this.medical.region_list.push({
                                    "province_id": _this.province_list_option[i].province_id,
                                    "province": _this.province_list_option[i].province,
                                    "city_list": _this.addCityValue
                                })
                            } else {
                                var onewArr = [];
                                onewArr.push({
                                    "province_id": _this.province_list_option[i].province_id,
                                    "province": _this.province_list_option[i].province,
                                    "city_list": _this.addCityValue
                                })
                                var region_list = {
                                    "region_list": onewArr
                                };
                                this.medical = Object.assign(this.medical, region_list);
                            }
                            break;
                        }
                    }
                } else {
                    if (this.checkedCitys == "") {
                        this.medical.region_list.splice(this.originalProvinceIndex, 1);
                    }
                }
            },
            //点击新增省份弹窗中的取消
            cancelChooseProvince() {
                this.showSystemPopup = false;
                this.showMgmtTheProvincePopup = false;
            },
            //添加定价范围
            clickAddPrice() {
                if (this.medical.pur_price_list.length >= 3) {
                    this.messageAlert("只能添加三种定价范围");
                    return;
                }
                this.medical.pur_price_list.push({
                    price: "",
                    min_num: "",
                    max_num: ""
                });
            },
            //删除定价范围
            deletePrice(index) {
                if (this.medical.pur_price_list.length <= 1) {
                    return;
                }
                this.medical.pur_price_list.splice(index, 1);
            },
            addPath(n1, n2) {
                //点击切换home-bar
                var obj = {};
                obj.n1 = n1;
                obj.n2 = n2;
                this.$store.commit("addPath", obj);
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            addTags() {
                if (this.tagInput === "") {
                    alert("请输入标签");
                    return;
                }
                this.medical.tag_list.push(this.tagInput);
                this.tagInput = "";
            },
            deleteTag(index) {
                this.medical.tag_list.splice(index, 1);
            },
            hideSystemPopup() {
                //关闭弹窗
                this.showSystemPopup = false;
                this.systemPopupTitle = "";
                this.showAddHealthCareType = false;
                this.showSeeImgPopup = false;
            },
            addHealthCareTypeFun() {
                //添加医保按钮
                this.getProvinceList(1);
                this.showSystemPopup = true;
                this.systemPopupTitle = "添加医保类型";
                this.showAddHealthCareType = true;
                this.healthCareRegionValue = "";
                this.healthCareTypeValue = "";
            },
            deleteSingleHealthCare(index) {
                //删除单个医保类型
                this.med_insr_list.splice(index, 1);
                this.medical.insurance_list.splice(index, 1);
            },
            addSingleHealthCare() {
                var _this = this;
                //添加单个医保类型
                this.showWarningText.province = false;
                this.showWarningText.healthCareType = false;
                if (this.healthCareRegionValue == "") {
                    this.showWarningText.province = true;
                }
                if (this.healthCareTypeValue == "") {
                    this.showWarningText.healthCareType = true;
                }
                if (this.healthCareRegionValue == "" || this.healthCareTypeValue == "") {
                    return;
                }
                console.log(this.med_insr_list);
                this.med_insr_list.push({
                    province_id: this.healthCareRegionValue,
                    med_insr_type: this.healthCareTypeValue
                });
                //med_insr_list数组都是数字，但是前台要显示对应的文字，下面med_insr_list_view数组解决这个问题
                let province_name = "";
                let med_insr_name = "";
                this.provinceList.forEach(function(item, index) {
                    if (item.province_id == _this.healthCareRegionValue) {
                        province_name = _this.provinceList[index].province;
                        return;
                    }
                });
                if (this.healthCareTypeValue == 1) {
                    med_insr_name = "甲类";
                } else if (this.healthCareTypeValue == 2) {
                    med_insr_name = "乙类";
                }
                _this.medical.insurance_list.push({
                    province: province_name,
                    med_insr_name: med_insr_name
                });
                this.hideSystemPopup();
            },
            seeImgFun(img) {
                this.showSystemPopup = true;
                this.systemPopupTitle = "";
                this.showSeeImgPopup = true;
                this.popupBigImg = img;
            },
            //改成两位小数
            changeTwoDecimal_f(x) {
                var s_x = x.toString();
                var pos_decimal = s_x.indexOf('.');
                if (s_x.length <= pos_decimal + 2) {
                    s_x += '0';
                }
                return s_x;
            },
            //保存并上架
            saveAndShelves(state) {
                if(state == 1){
                    var state = state
                }
                else{
                    var state = undefined;
                }
                let _this = this;
                for (var i in _this.medical.pur_price_list) {
                    if (_this.medical.pur_price_list[i].max_num == "" || _this.medical.pur_price_list[i].max_num == 0 || _this.medical.pur_price_list[i].min_num == "" || _this.medical.pur_price_list[i].min_num == 0 || _this.medical.pur_price_list[i].price == "" || _this.medical.pur_price_list[i].price == 0) {
                        _this.messageAlert("定价范围不符合要求！");
                        return;
                    }
                }
                if (this.medical.region_list == "" || this.medical.region_list == undefined) {
                    _this.messageAlert("请选择销售范围！");
                    return;
                }
                //将一位小数变成两位：
                var o_info_fee_rate = _this.org_info_fee_rate;
                if (_this.org_info_fee_rate.indexOf("%") > -1) {
                    o_info_fee_rate = _this.org_info_fee_rate.replace("%", "") / 100;
                }
                o_info_fee_rate = this.changeTwoDecimal_f(o_info_fee_rate);
                //更新token
                let ourls =
                    this.urls +
                    "/who/user/refreshToken/" +
                    localStorage.getItem("uid") +
                    "/" +
                    localStorage.getItem("token");
                checkTime(
                    new Date().getTime() / 1000,
                    ourls,
                    localStorage.getItem("reToken")
                );
                var data = {
                    medical_id: _this.medical.id, //药品id
                    stock: _this.medical.stock, //库存
                    manu_date:_this.medical.manu_date,  //生产日期
                    info_fee_rate: o_info_fee_rate, //信息费比例
                    batch_num: _this.medical.batch_num, //生产批号
                    shelf_life: _this.medical.shelf_life, //保质期
                    pur_price_list: _this.medical.pur_price_list, //批发价数组[{price, min_num, max_num}]
                    region_list: _this.medical.region_list, //销售范围
                    status:state,  //1为保存并上架
                };
                if (_this.medical.stock == "" || _this.medical.manu_date == "" || _this.medical.batch_num == "" || _this.medical.shelf_life == "" || o_info_fee_rate == []) {
                    _this.messageAlert("请填写完整货品信息");
                    return;
                }
                var data = JSON.stringify(data);
                _this
                    .$http({
                        url: this.urls +
                            "/who/medical/editMedical/" +
                            localStorage.getItem("uid") +
                            "/" +
                            localStorage.getItem("token"),
                        method: "post",
                        data: {
                            data: data
                        },
                    })
                    .then(function(res) {
                        let data = res.data;
                        if (data.code == 1) {
                            _this.hideSystemPopup();
                            _this.successfulAlert("保存成功");
                            history.go(-1);
                            localStorage.setItem("nowTimes", new Date().getTime() / 1000); //检查token失效函数
                        } else {
                            _this.messageAlert(data.msg);
                            invalid(data.msg); //检查token失效函数
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            },
        },
        filters: {
            filterMed_type(val) {
                let data = "";
                if (val == 1) {
                    data = "RX"
                } else if (val == 2) {
                    data = "甲类OTC"
                } else if (val == 3) {
                    data = "乙类OTC"
                }
                return data;
            },
        }
    };
</script>

<style lang="less">
    @import "../css/adddrug.less";
</style>
